<template>
    <div id="wrapper" >
        <img  style="width: 657px;height: 322px;-webkit-app-region: drag " @load="imgLoad" src="~@/assets/img/TV.png" >
        <!-- 屏幕 -->
        <Screen class="Screen"  ref="Screen" @changeTVNum="changeTVNum"/>
        <div class="fullScreen" @dblclick="doubelClick()"></div>
        <!-- 功能面版 -->
        <div class="menubutton" v-show="isImgLoad">
            <van-notice-bar
                style="height:20px;padding: 0;text-align: center;font-weight: 900;border: 1px inset;-webkit-user-select: none;"
                color="#000" background="#62ffb5"
                :speed="40"
                :text="title"/>
            <van-slider v-model="Volume" style="margin: 16px 0;" :min="0" :max="1" :step="0.01" @input="setVolume" />
            <van-stepper v-model="ts" :key="tvNum" input-width="48" disable-input  @plus="changeVideo(1)" @minus="changeVideo(-1)"  class="LEDFont" :min="-1"/>
        </div>
        <!-- 开关机 -->
        <div @click="off" class="onoff">
            <img src="~@/assets/img/offAn.png" style="height: 50px;" v-show="isOff" alt="开机"/>
            <img src="~@/assets/img/onAn.png" style="height: 50px;" v-show="!isOff" alt="关机"/>
        </div>
    </div>
</template>

<script>
import Screen from './common/Screen.vue'
export default {
    name: 'landing-page',
    components: { 
         Screen
    },
    data:function(){
        return {
            isImgLoad:false,
            isOff:false,
            title:'无节目',
            Volume:1,
            ts:1,
            tvNum:0
        }
    },
    created(){
        
    },
    methods: {
        doubelClick:function(){
            
            this.$refs.Screen.fullScreen()
        },
        off:function(){
            this.isOff=!this.isOff
            this.$refs.Screen.setOff(this.isOff)
            this.title=""
            this.ts=0
        },
        imgLoad:function(){
            this.isImgLoad=true
            this.istvNum=true
        },
        playerReadied:function(){
            console.log('playerReadied')
        },
        
        setVolume:function(val){
            this.$refs.Screen.setVolume(val)
        },
        changeVideo:function(tv){
            this.$refs.Screen.changeVideo(tv)
        },
        changeTVNum:function(num,title){
            this.ts=num
            this.title=title
        }
    }
}
</script>

<style scoped>
@font-face {
  font-family: LEDFont;
  font-size: 36px;
  src: url('./../assets/font/UnidreamLED.ttf');
}
#wrapper{
    position: relative;
    display: inline-block;
}
.LEDFont>>>.van-stepper__input{
    font-family: LEDFont;
    background-color: #62ffb5;
    color:#000
}
.Screen{
    position: absolute;
    left: 32px;
    z-index: 0;
    top: 24px;
    border-radius: 51px;
    z-index: -1;
    width: 466px;
    height: 264px;
}
.fullScreen{
    -webkit-app-region: no-drag;
    position: absolute;
    left: 32px;
    z-index: 0;
    top: 24px;
    border-radius: 51px;
    z-index: 2;
    width: 466px;
    height: 264px;
}
.onoff{
    position: absolute;
    right: 58px;
    bottom: 43px;
    z-index: 999;
    -webkit-app-region: no-drag;
}

.menubutton{
    position: absolute;
    /* cursor: pointer; */
    top: 45px;
    right: 29px;
    left: 520px;
    -webkit-app-region: no-drag;
    padding-top: 10px;
}

</style>
